<template lang="html">
	<div class="comment">
		<!-- 头部 -->
		<div class="header">
			<router-link to="/todayrecommend" class="Jtimg">
				<img :src="jtImg">
			</router-link>	
			每日推荐		
			<div class="share">
				分享
			</div>					
		</div>
		<!-- 评论区 -->
		<div class="comment-container">
			<div class="comment-user">
				<img :src="userIcon">
				<div class="username">
					<p>阳光少年~</p>
				</div>				
			</div>
			<div class="comment-desc">
				听朋友推荐了这个课程,现已学完感觉获益匪浅,现在分享给大家,有需要的可以参考
			</div>
			<div class="comment-img">
				<img :src="autoImg">
			</div>
		</div>
		<!-- 收藏点赞 -->
		<div class="collect">
			<input type="text" name="" v-model="prompt">
			<img :src="commentImg" class="commentImg">
			<div class="hoarding">
				<img :src="hoardingImg" class="hoardingImg">
				收藏
				<img :src="likeImg" class="likeImg">
				点赞
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:'comment',
		data(){
			return{
				jtImg:require("../assets/icon/arrow-left.png"),
				userIcon:require("../assets/img/usericon.png"),
				autoImg:require("../assets/img/web.png"),
				commentImg:require("../assets/icon/consult.png"),
				hoardingImg:require("../assets/icon/collect.png"),
				likeImg:require("../assets/icon/praise.png"),
			    prompt:"评论"
			}
		}
	}
</script>
<style lang="less" scoped>
.comment{
	.header{
		height:40px;
		line-height: 40px;
		font-size: 25px;
		text-align: center;
		padding:5px 0;
		border-bottom: 1px solid #ddd;
		position:reslative;
		.share{
		   position:absolute;
		   right:20px;
		   top:13px;
		   width:60px;
		   height:20px;
		   line-height: 20px;
           float:right;
           padding:3px;
           font-size: 14px;
           background-color: #3DB2FC;
           border-radius: 20px;
           color:#fff;
		}
		.Jtimg{
           img{
           	position: absolute;
           	left:18px;
           	top:5px;
           	width:35px;
           	transform: rotate(-180deg)
           }
		}
	}
	.comment-container{
		padding:15px 0;
        .comment-user{
        	padding:0 20px;
        	img{
        		width:50px;
        		height:60px;
                border-radius: 80%;
        	}
        	.username{
        		width:80%;
        		font-size:18px;
        		float:right;
        		text-align: left;
        	}
        }
        .comment-desc{
        	margin-top: 50px;
        	padding: 0 20px;
        	font-weight: bold;
        	
        }
        .comment-img{
            margin-top: 60px;
        }
	}
	.collect{
		width:100%;
		height:70px;
		line-height: 70px;
		background-color: #3EB3FD;
		position:absolute;
		bottom:60px;
		input{
			width:200px;
			height:20px;
			background-color: #fff;
			border-radius: 8px;
			margin-left: 20px;
			text-align: center;
			color:#999;
		}
		.commentImg{
			width:18px;
			position:absolute;
			left:80px;
			top:25px;
		}
		.hoarding{
            float:right;
            margin-right: 20px;
            .hoardingImg{
            	width:20px;
            }
            .likeImg{
            	width:25px;
            }
		}
	}
}
	
</style>